<template>
  <view class="detail">
	  <!-- 返回按钮 -->
	  <view class="back-btn" @click="handleBack">
	  	<image class="back-icon" src="/static/mine/right-black.png"></image>
	  </view>
    <!-- 图片区域 -->
    <view class="image-section">
      <image 
        :src="receivedData.coverUrl" 
        mode="aspectFill" 
        class="detail-image"
      ></image>
    </view>
    <!-- 内容区域 -->
    <view class="content-section">
      <view class="title-container">
        <text class="detail-title">{{ receivedData.title }}</text>
      </view>
      <textarea 
        class="detail-description" 
        :value="receivedData.content" 
        disabled 
        auto-height 
        cursor-spacing="10"
      ></textarea>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'

// 定义变量来存储接收到的数据
const receivedData = ref({});

onLoad((options) => {
  try {
    if (options.data) {
      // 使用 decodeURIComponent 解码并使用 JSON.parse 转换为对象
      receivedData.value = JSON.parse(decodeURIComponent(options.data));
    }
  } catch (error) {
    console.error('解析传递的数据时出错:', error);
  }
});
// 返回上一页
const handleBack = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.detail {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 65rpx 0rpx;
}
.image-section {
  flex:1;
  max-height: 50%;
  position: relative;
  overflow: hidden;
}

.detail-image {
  width:100%;
  height:100%;
  object-fit: cover;
}

.content-section {
  flex:1;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.title-container {
  margin-bottom: 20rpx;
}

.detail-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.detail-description {
  flex: 1;
  width:100%;
  font-size: 28rpx;
  color: #666666;
  border: none;
  padding:0;
  line-height: 1.6;
}
/* 返回按钮 */
 .back-btn {
   display: flex;
   align-items: center;
   padding: 20rpx 0rpx;
 }
 
 .back-icon {
   width: 60rpx;
   height:60rpx;
 }
</style>